<template>
  <div>
     <div class="pj_wrap" ref="mypj">
       <h1>评价 <span>7</span></h1>
       <div class="pj_one" v-for="(item,index) in pjList" :key="index">
        <div class="pj_info">
          <div class="pj_name">
              <img src="https://img1.baidu.com/it/u=2716398045,2043787292&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="">
              <div >
                  <h2>{{item.UserId}}</h2>
                  <p>{{new Date(item.createAt).toLocaleString()}}</p>
              </div>
          </div>
          <van-rate v-model="value" />
        </div>
        <div>
          <h3>{{item.evaluate}}</h3>
        </div>
      </div>
      <div class="pj_bottom">
          <input type="text" v-model="pjtxt">
          <van-button type="primary" @click="pjfn">发表</van-button>
        </div>
     </div>
  </div>
</template>
<script>
import {pjApi} from '../../api/course'
export default {
   props:["CDid","pjList"],
    data(){
      return{
        value:0,
        pjtxt:"",
        // pjList:[]
      }
    },
   methods:{
    //  发表评论接口
     async pjfn(){
       var res=await pjApi({
          courseId:this.CDid,//课程ID
          userName:localStorage.userName, //用户名
          evaluate:this.pjtxt
       })
       console.log(res)
       this.pjtxt="";
      //  评价完成 父组件获取课程信息
        console.log(this.$parent.$parent.$parent)
        this.$parent.$parent.$parent.$parent.getCourse();
        this.$refs.mypj.scrollIntoView(false);
     }
  }
}
</script>
<style lang="less">
  .pj_wrap{

    background: white;
    padding: 10px 10px;
    box-sizing: border-box;
    padding-bottom: 150px;
    h1{
      color: white;
    }
    .pj_one{
   
      margin-top: 10px;
      border-bottom:1px solid #e5e5e5 ;
     .pj_info{
      width: 100%;
       display: flex;
       justify-content: space-between;
       .pj_name{
         display: flex;
       }
       img{
         width: 40px;
         height: 40px;
         margin: 0 10px;
         border-radius:50% ;
       }
     
     }
    }
      h3{
         line-height: 50px;
         padding: 0 10px;
         box-sizing: border-box;
       }
  }
  .pj_bottom{
    position: fixed;
    bottom:0;
    left: 0;
    width: 100%;
    display: flex;
    input{
      width: 80%;
      margin-right: 10px;
    }

  }
 
</style>